{extend name="public:penbase" /}
{block name="header"}
{include file="public/pentop-nav" /}
{/block}
{block name="content"}
<div class="weui-tab__panel" style="background: #f5f5f5">
    <div class="header-box">
        <a href="#" class="sell-btn">
            <img src="__PUBLIC__/pension/images/appreciation.png" alt="我要卖出" title="我要卖出"/>

            <p>我要卖出</p>
        </a>

        <div class="s-search">
            <input type="text"/> <a href="javascript:;">搜索</a>
        </div>
    </div>
    <div class="swiper-container">
        <div class="my-pagination">
            <ul class="my-pagination-ul">

            </ul>
        </div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">

                <a class="weui-cell" href="javascript:;">
                    <div class="weui-cell__bd">
                        <p class="table-title">
                            <span></span>交易记录查询
                        </p>
                    </div>
                    <div class="weui-cell__ft table-title-r"><span class="tip">显示第 1 到第 2 条记录，总共 2 条记录</span></div>
                </a>

                <div class="table-box">
                    <table>
                        <tr>
                            <th>挂卖数量</th>
                            <th>可卖数量</th>
                            <th>操作</th>
                        </tr>
                        <tr>
                            <td>1111</td>
                            <td>2222</td>
                            <td><a href="#">购买</a></td>
                        </tr>
                        <tr>
                            <td>1111</td>
                            <td>444</td>
                            <td><a href="#">购买</a></td>
                        </tr>
                        <tr>
                            <td>23333</td>
                            <td>444</td>
                            <td><a href="#">购买</a></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="swiper-slide">
                <a class="weui-cell" href="javascript:;">
                    <div class="weui-cell__bd">
                        <p class="table-title">
                            <span></span>卖单记录查询
                        </p>
                    </div>
                    <div class="weui-cell__ft table-title-r"><span class="tip">显示第 1 到第 2 条记录，总共 2 条记录</span></div>
                </a>

                <div class="table-box">
                    <table>
                        <tr>
                            <th>挂卖数量</th>
                            <th>已使用数量</th>
                            <th>可卖数量</th>
                            <th>操作</th>
                        </tr>
                        <tr>
                            <td>1111</td>
                            <td>2222</td>
                            <td>23333</td>
                            <td><a href="#">购买</a></td>
                        </tr>
                        <tr>
                            <td>2222</td>
                            <td>23333</td>
                            <td>444</td>
                            <td><a href="#">购买</a></td>
                        </tr>
                        <tr>
                            <td>1111</td>
                            <td>23333</td>
                            <td>444</td>
                            <td><a href="#">购买</a></td>
                        </tr>
                        <tr>
                            <td>2222</td>
                            <td>23333</td>
                            <td>444</td>
                            <td><a href="#">购买</a></td>
                        </tr>
                    </table>
                </div>

            </div>
            <div class="swiper-slide">
                <a class="weui-cell" href="javascript:;">
                    <div class="weui-cell__bd">
                        <p class="table-title">
                            <span></span>买单记录查询
                        </p>
                    </div>
                    <div class="weui-cell__ft table-title-r"><span class="tip">显示第 1 到第 2 条记录，总共 2 条记录</span></div>
                </a>

                <div class="table-box">
                    <table>
                        <tr>
                            <th>买入数量</th>
                            <th>卖家地址</th>
                            <th>状态</th>
                            <th>订单创建时间</th>
                            <th>操作</th>
                        </tr>
                        <tr>
                            <td>1111</td>
                            <td>2222</td>
                            <td>23333</td>
                            <td>444</td>
                            <td><a href="#">购买</a></td>
                        </tr>
                        <tr>
                            <td>1111</td>
                            <td>2222</td>
                            <td>23333</td>
                            <td>444</td>
                            <td><a href="#">购买</a></td>
                        </tr>
                        <tr>
                            <td>1111</td>
                            <td>2222</td>
                            <td>23333</td>
                            <td>444</td>
                            <td><a href="#">购买</a></td>
                        </tr>
                        <tr>
                            <td>1111</td>
                            <td>2222</td>
                            <td>23333</td>
                            <td>444</td>
                            <td><a href="#">购买</a></td>
                        </tr>
                        <tr>
                            <td>1111</td>
                            <td>2222</td>
                            <td>23333</td>
                            <td>444</td>
                            <td><a href="#">购买</a></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Swiper JS -->
<script src="__PUBLIC__/pension/js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
    var tabSwiper = new Swiper('.swiper-container', {
        autoHeight: true, // 自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
        allowTouchMove: true, // 允许触摸滑动。设为false时，slide无法滑动，只能使用扩展API函数例如slideNext() 或slidePrev()或slideTo()等改变slides滑动
        resistance: true, // 边缘抵抗。当swiper已经处于第一个或最后一个slide时，继续拖动Swiper会离开边界，释放后弹回。
        resistanceRatio: 0.7, // 抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。
        pagination: { // 分页器
            el: '.my-pagination-ul',
            clickable: true,
            clickableClass: 'y-pagination-clickable',
            renderBullet: function (index, className) {
                switch (index) {
                    case 0:
                        name = '交易中心';
                        break;
                    case 1:
                        name = '我的买单';
                        break;
                    case 2:
                        name = '我的卖单';
                        break;
                    default:
                        name = '';
                }
                return '<li class="' + className + '">' + name + '</li>';
            }
        },
    })
</script>
{/block}